<template>
  <div class="myArticle">
    <el-card>
    <el-row v-for="c in contentArr" style="padding: 12px 0">
      <el-col span="8" style="height:145px;">
        <img :src="c.contentImgUrl" style="height:145px;width:258px;">
      </el-col>
      <el-col span="16" style="height:145px;position: relative">
        <a :href="'/detail?id='+c.id">
          <p style="color:black;text-align: left;font-size:16px;font-weight: bold;margin-top:0;">{{c.title}}</p>
          <p v-html="c.brief" style="color:#666;font-size:10px;text-align: left;line-height: 20px;"></p>
        </a>
        <div style="position: absolute;bottom: 10px">
        <i style="font-size:13px;" class="el-icon-location-outline">{{c.ip}}</i>
        <el-avatar :size="20" :src="c.userImgUrl" style="margin:0 5px -5px 40px;"></el-avatar>
        <span style="font-size: 13px;color:#ff6e6e">{{c.nickName}}</span>
        <i style="font-size:14px;margin-left: 50px;" class="el-icon-star-off">{{c.collectCount}}</i>
        <i style="font-size:14px;margin-left: 50px;" class="el-icon-chat-dot-square">{{c.commentCount}}</i>
        <svg style="font-size:14px;margin:0 0 -1px 50px;" t="1688230002474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1818" width="14" height="14"><path d="M518.4 149.290667c112.597333-80.789333 267.882667-69.397333 368.128 32 53.866667 54.528 84.138667 128.853333 84.138667 206.378666 0 77.525333-30.293333 151.850667-84.096 206.336l-294.421334 299.52a110.976 110.976 0 0 1-80.213333 34.474667 110.72 110.72 0 0 1-79.914667-34.176L137.322667 593.770667C83.562667 539.242667 53.333333 464.981333 53.333333 387.541333s30.229333-151.722667 84.010667-206.272c100.224-101.376 255.530667-112.768 368.128-31.978666l6.442667 4.778666 6.485333-4.778666z m322.602667 76.970666c-84.629333-85.589333-219.157333-88.64-307.328-6.954666l-21.76 20.138666-21.717334-20.138666c-88.192-81.685333-222.72-78.634667-307.306666 6.933333-41.92 42.496-65.557333 100.608-65.557334 161.28 0 60.693333 23.637333 118.805333 65.6 161.344l295.04 300.416c9.045333 9.450667 21.269333 14.72 33.962667 14.72 12.693333 0 24.917333-5.269333 34.261333-15.04L840.96 549.077333c42.005333-42.496 65.685333-100.650667 65.685333-161.408 0-60.736-23.68-118.912-65.664-161.408z" fill="#2C3E50" p-id="1819"></path></svg>
        <span style="font-size: 15px;">{{c.upCount}}</span>
        <i style="font-size:14px;margin-left: 50px;" class="el-icon-view">{{c.viewCount}}</i>
        </div>
      </el-col>
    </el-row>
      <el-pagination
          @current-change="changePage"
          layout="total, prev, pager, next"
          :hide-on-single-page="true"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total">
      </el-pagination>
  </el-card>
  </div>
</template>

<script>
export default {
  name: "HotView",
  data:function (){
    return{
      contentArr:[],
      // 分页相关数据
      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: '',
      total:'',
    }
  },
  methods:{
    OtherContent(){
      //请求当前文章作者其它内容
      let userId = localStorage.getItem("id");
      console.log("userid="+userId);
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = "http://localhost:8080/v1/contents/myArticleCollect?page="+page+"&userId="+userId;

      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.contentArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        }else {
          let title = '操作失败';
          this.$alert(jsonResult.msg, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.OtherContent();
    },
  },
  mounted() {
    this.OtherContent();
  }

}
</script>

<style scoped>

</style>